<template>
  <transition name="box">
    <div class="box" v-show="show" @mousedown="handleDown" @mouseup="handleUp">
      <div class="move">
        <div class="front" data-name="front">前进</div>
        <div class="back" data-name="back">后退</div>
      </div>
      <div class="dir">
        <div data-name="left" class="left">
          <img
            class="left"
            src="./images/left.png"
            alt=""
            style="marginright: 20px"
          />
        </div>
        <div data-name="right" class="right">
          <img class="right" src="./images/right.png" alt="" />
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import axios from "../utils/axios.js";
let timer = null;
export default {
  name: "Control",
  data() {
    return {
      show: false,
    };
  },
  mounted() {
    setTimeout(() => {
      this.show = true;
    }, 1200);
  },
  methods: {
    handleDown(event) {
      let { name } = event.target.dataset;
      if (!name) return;
      console.log(name);
      axios.post("/control", { direction: name });
      timer = setInterval(() => {
        console.log(name);
        axios.post("/control", { direction: name });
      }, 500);
    }, 
    handleUp() {
      clearInterval(timer);
      timer = null;
    },
  },
};
</script>

<style scoped lang="less">
.front,
.back {
  &:active {
    transform: scale(0.9);
  }
}
.box {
  width: 95vw;
  height: 350px;
  background: rgba(255, 255, 255, 0.5);
  margin: 60px auto 0 auto;
  border-radius: 30px;
  box-shadow: gray 5px 5px 5px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.box-enter {
  transform: translateX(100%);
}
.box-enter-to {
  transform: translateX(0);
}
.box-enter-active {
  transition: all 0.8s ease;
}
.dir {
  display: flex;
  width: 250px;
  .left:active,
  .right:active {
    transform: scale(0.9);
  }
  img {
    width: 100%;
    pointer-events: none;
  }
}
.move {
  div {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: black;
    color: white;
    line-height: 80px;
    text-align: center;
    margin: 20px 0 20px 0;
  }
}
</style>